<template>
  <div>
    <div v-for="cart in cartList">
      <span>{{cart.sellerName}}</span>
      <el-table :data="cart.cartItemVoList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column  width="55">
          <template slot-scope="scope">
            <img :src="scope.row.skuDefaultImg" class="image">
          </template>
        </el-table-column>
        <el-table-column prop="skuName" label="商品名称"  width="180"></el-table-column>
        <el-table-column prop="skuAttr"  width="180"></el-table-column>
        <el-table-column prop="skuPrice" label="单价"></el-table-column>
        <el-table-column label="数量">
          <template slot-scope="scope">
              <el-input-number  :min="1" :max="10"  v-model="scope.row.cartItemNum"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="radioDelete(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="delete"><el-button @click="deleteCart">全部删除</el-button></div>
    <div >
      <h3 class="moneyFloat">总价：￥{{moneys}}</h3>
      <el-button @click="goToPaySuccess" type="danger">支付包全款支付</el-button>
    </div>
  </div>
</template>

<script>

import {cartVoList,deleteCartItem} from '@/api/producer/skuInfo'

export default {
  name: "SkuInfo",
  data() {
    return {
      cartList:[{
        cartItemVoList:[],
        }
      ],
      cartItemVoLists:[],
      skuIds:[],
      skuIdValue:{},
      moneys:0,
    };

  },


  created() {
    this.getList();
  },

  methods: {
    /** 查询sku列表 */
    getList() {
      cartVoList().then(response => {
        this.cartList = response;
        console.log(response)
        this.cartList.cartItemVoList = response.cartItemVoList;
        console.log(this.cartList.cartItemVoList)
      })
    },

    async goToPaySuccess(){
      //提示考虑清楚支付
      this.$confirm('考虑清楚在支付！', '提示', {
        confirmButtonText: '刷给我狠狠的刷',
        cancelButtonText: '遗憾退场',
        type: 'warning'
      }).then(() => {
        //这里写跳转支付页面
        window.open("http://127.0.0.1:9211/alipay/pay?subject="+this.cartList[0].sellerName+"&traceNo="+Math.floor(Math.random() * 900000) + 100000+"&totalAmount="+this.moneys,'_self')
      }).catch(() => {});
      //在这里我选择了window.open(url,'_self')形式，也就是不跳转新的页面，在本页面直接跳转

    },

    handleSelectionChange(val){
      this.moneys = "";
      this.skuIds = [];
      this.skuIdValue = "";
      this.cartItemVoLists = val;
      this.cartItemVoLists.forEach((item)=>{
        this.skuIds.push(item.skuId)
        //选中的单价相加
        this.moneys = (Number)(this.moneys + item.skuPrice * item.cartItemNum);

      })
      this.skuIds.forEach((item)=>{
        this.skuIdValue = this.skuIdValue + item + ",";
      })
    },

    deleteCart(){
      deleteCartItem(this.skuIdValue).then(response => {
        console.log(response)
        this.getList();
      })
    },
    radioDelete(row){
      deleteCartItem(row.skuId).then(response => {
        console.log(response)
        this.getList();
      })
    }
  }
};
</script>
<style>
.moneyFloat {
  float: right;
  color: red;
}
.delete{
  float: left;
}
</style>
